<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="box"></div>
	<div id="my">my</div>
	<span id="fo[b]">fob</span>
	<div>haha</div>
	<div>hehe</div>
	<div class="pp">pp</div>


	<form action="">
		<label for="">name</label>
		<input name="name"/>
		<fieldset>
			<label for="">new</label><input name="new"/>
		</fieldset>
	</form>
	<input name="none"/>

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>5</li>
		<li>
			<ul>
				<li>8</li>
				<li>9</li>
				<li>0</li>
			</ul>
	    </li>
		
		
	</ul>


</body>
</html>
<script src="../jquery-3.3.1.min.js"></script>
<script>
	//jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

	//jQuery 1.x.x兼容低版本IE浏览器
	//jQuery 2.0以上不兼容低版本IE
   console.log($("#box"));
   // jQuery("#box").css({
   // 	width:200,
   // 	height:200,
   // 	background:"green"
   // });
	//选择器
	$("#box").css({
		width:200,
		height:200,
		background:"red"
	});
	$("#my").css({
		color:"pink",
		fontSize:20//带-的要用驼峰命名法，也可以加双引号即"font-size","20px"  20px不加px可以不加双引号

	});
	console.log($("#my"));


	$("#fo\\[b\\]").css({
		color:"yellow"
	});
	console.log($("#fo\\[b\\]"));


	$("div");
	console.log($("div"));

	$(".pp"); 
	console.log($(".pp"));

	//*
	$("*");
	console.log($("*"));

	$("div,span");
	console.log($("div,span"));


	$("form input");
	console.log($("form input"));

	$("ul>li").css({
		color:"blue"
	});
	console.log($("ul > li"));

	// $("ul li").css({
	// 	color:"orange"
	// });
	// console.log($("ul>li"));


	$("div+span");
	console.log($("div+span"));



</script>